
<div class="wrapper wrapper-content page-heading animated fadeInRight">

    <div class="row">
        <div class="col-lg-9">
            <div class="tabs-container">
                <ul class="nav nav-tabs" id="tab-list-2">
                    <li class="links active" id="search-link"><a href="#search" role="tab" data-toggle="tab">Setup</a></li>
                </ul>
                <div class="tab-content">
                   <div id="search" class="tab-pane active">
                        <div class="panel-body">
                              <div id="edit_rate_sched" class="ibox-content">
                                <h3 style="color: #00afef">Marker Setup</h3>
                                  <form  id="add_marker_set" class="form-inline">
                                   
                                </br>
                                  <table id="pgTable"class="table table-bordered" style="width:100%;">

                                    <thead>
                                        <tr>
                                          <th>Range From</th>
                                          <th style="">Range To</th>
                                          <th style="">Marker</th>
                                          <th style="width:80px;">Action</th>
                                        </tr>
                                        <tr>
                                          
                                          <td style="margin:0px;padding:0px;">
                                              <input style="width:100%;" type="number" id="fr" name="r_from" class="form-control-custom" value="">
                                          </td>
                                          <td style="margin:0px;padding:0px;">
                                              <input style="width:100%;" type="number" id="to" name="r_to" class="form-control-custom">
                                          </td>
                                          <td style="margin:0px;padding:0px;">
                                             <select  id="col" class="form-control chosen-select" name="color">
                                                <?php foreach ($markers as $map) { ?>
                                                  <option id="<?php echo $map->lookup_code; ?>" value="<?php echo $map->lookup_code; ?>"><?php echo $map->description; ?></option>
                                                <?php } ?>
                                              </select>
                                          </td>
                                          <td style="margin:0px;padding:0px;">
                                              <a style="width:100%;" class="btn btn-white" id="add_marks"><i class="fa fa-plus success"></i></a>
                                          </td>
                                        </tr>      
                                    </thead>
                                  </form>
                                  
                                    
                                    <tbody id="tbl_ranges" class="animate fadeIn">       

                                    </tbody>
                                  </table> 
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- END of class row-->
</div>
<input type="hidden" id="count_add" value="0">
<input type="hidden" id="count_edit" value="0">
<input type="hidden" id="count_view" value="0">
<script>
    $(document).ready(function(){
      $(".chosen-select").chosen({width:"100%;"}); 


      $.ajax({
              url: "<?php echo base_url($this->session->userdata('forajax') . '/view_mark_list'); ?>",
              method:'post',
              dataType:'json',
              success: function (data) {
               
                       var trHTML='';
                       var countData=0;
                        $.each(data, function(i, item) {
                            trHTML += '<tr style="line-height:1;padding:0px;"><input id="range_id" type="hidden" value="'+ data[i].range_mark_id +'"><input id="mark_id" type="hidden" value="'+ data[i].marker_code +'"><input id="m_desc" type="hidden" value="'+ data[i].description +'"><td style="text-align:left; padding-left:0px;">'+ data[i].range_from +'</td><td style="text-align:left; padding-left:0px;">'+ data[i].range_to +'</td><td style="text-align:center; padding-left:0px;">'+ data[i].description +'</td><td align="center" style="margin:0px;padding:0px;"><a style="width:100%;" class="btn btn-outline btn-danger del" id="ok_x"><i id="del_icon" class="fa fa-times success"></i></a></td></tr>';
                           });
                        $('#tbl_ranges').html(trHTML);
                  
              }
           });
      


    $.validator.setDefaults({ ignore: ":hidden:not(select)" });
    $("#add_marker_set").validate({
        rules: {
          r_from: {
            required: true
          },
          r_to: {
            required: true
          }
        }
    });





    $('#add_marks').click(function(){
      var trHTML='';
      cols = $('#col').val();
      if($('#add_marker_set').valid() == true){
        if($('#fr').val()-$('#to').val() > 0){
            notifymsg("danger",'Range From must be higher than Range To.');
        }else{
          $.ajax({
              url: "<?php echo base_url($this->session->userdata('forajax') . '/insert_marks'); ?>",
              method:'post',
              data: $('#add_marker_set').serialize(),
              dataType:'json',
              success: function (data) {
                  if(data[0].error == 1){
                      notifymsg("danger",data[0].msg);
                  }else{
                      notifymsg("success",". . .Range Added Successfully");
                       var countData=0;
                        $.each(data, function(i, item) {
                             trHTML += '<tr style="line-height:1;padding:0px;"><input id="range_id" type="hidden" value="'+ data[i].range_mark_id +'"><input id="mark_id" type="hidden" value="'+ data[i].marker_code +'"><input id="m_desc" type="hidden" value="'+ data[i].description +'"><td style="text-align:left; padding-left:0px;">'+ data[i].range_from +'</td><td style="text-align:left; padding-left:0px;">'+ data[i].range_to +'</td><td style="text-align:center; padding-left:0px;">'+ data[i].description +'</td><td align="center" style="margin:0px;padding:0px;"><a style="width:100%;" class="btn btn-outline btn-danger del" id="ok_x"><i id="del_icon" class="fa fa-times success"></i></a></td></tr>';
                          });

                        //$('#e_list_chg_opt').html(tmp).trigger("chosen:updated");
                        gen_select();
                        
                        $('#tbl_ranges').html(trHTML);
                  }  
              }
           });
          }
        }
      });

      function gen_select(){
          $.ajax({
                  url: "<?php echo base_url($this->session->userdata('forajax') . '/gen_selection'); ?>",
                  method:'post',
                  dataType:'json',
                  success: function (dat) {
                           var tmp='';
                           var countData=0;
                            $.each(dat, function(i, item) {
                                 tmp += "<option value='"+dat[i].lookup_code+"'>"+dat[i].description+"</option>";
                               });
                            $('#col').html(tmp).trigger("chosen:updated");
                  }
               });
      }




    $(document).on('click','.btn.btn-outline.btn-danger.del',function(){
              var sad         = $(this);
              var range_id    = $(this).closest('tr').children('#range_id').val();
              var mark_code   = $(this).closest('tr').children('#mark_id').val();
              var mark_desc   = $(this).closest('tr').children('#m_desc').val();
              swal({
                title: "Are you sure?",
                text: "This line in range will be deleted !",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Yes, delete it!",
                closeOnConfirm: false
            }, function (isConfirm) {
              if (isConfirm) {
                $.ajax({
                        type: "POST",
                        url: "<?php echo base_url($this->session->userdata('forajax') . '/delete_range'); ?>",
                        data: { "range_id": range_id },
                        dataType: 'json',
                    success: function(data){
                        console.log(data);
                        if(data.length != 0){
                          if(data[0].error == 1){
                              notifymsg("danger",data[0].msg);
                          }else{
                          $('#tbl_ranges').empty();
                           console.log("there should be a notification");
                          var trHTML = '';
                          notifymsg("success",". . .Range Deleted Successfully");
                          $.each(data, function(i, item) {
                             trHTML += '<tr style="line-height:1;padding:0px;"><input id="range_id" type="hidden" value="'+ data[i].range_mark_id +'"><input id="mark_id" type="hidden" value="'+ data[i].marker_code +'"><input id="m_desc" type="hidden" value="'+ data[i].description +'"><td style="text-align:left; padding-left:0px;">'+ data[i].range_from +'</td><td style="text-align:left; padding-left:0px;">'+ data[i].range_to +'</td><td style="text-align:center; padding-left:0px;">'+ data[i].description +'</td><td align="center" style="margin:0px;padding:0px;"><a style="width:100%;" class="btn btn-outline btn-danger del" id="ok_x"><i id="del_icon" class="fa fa-times success"></i></a></td></tr>';
                            });
                          $('#tbl_ranges').html(trHTML);
                          gen_select();
                              // var tmp='';
                              // tmp += "<option value='"+mark_code+"'>"+mark_desc+"</option>";
                              // $('#col').append(tmp).trigger("chosen:updated");
                          }
                         }else{
                           $('#tbl_ranges').empty();
                           gen_select();
                         } 
                      }
                    });
                swal("Deleted!", "Data has been deleted.", "success");
              }
            });
          });








    });




        
</script>